<template>
  <div class="page">
    <div class="page__bd">
      <div class="weui-search-bar">
        <div class="weui-search-bar__form">
          <div class="weui-search-bar__box">
            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
            <input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="wxSearchData.value" :focus="inputShowed" @input="wxSearchInput" />
            <div class="weui-icon-clear" v-if="wxSearchData.value.length > 0" @click="wxSearchClear">
              <icon type="clear" size="14"></icon>
            </div>
          </div>
          <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
            <icon class="weui-icon-search" type="search" size="14"></icon>
            <div class="weui-search-bar__text">搜索</div>
          </label>
        </div>
        <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="wxSearchConfirm">
          <p v-if="wxSearchData.value.length > 0" data-key="search" class="search-text">搜索</p>
          <p v-else data-key="back" class="search-text">返回</p>
        </div>
      </div>
      <div class="weui-cells searchbar-result" v-if="wxSearchData.value.length > 0">
        <div class="weui-cell" hover-class="weui-cell_active" v-for="item in wxSearchData.tipsKeys" :key="item">
          <div class="weui-cell__bd" @click="wxSearchKeyTap" :data-key="item">
            <div>{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="wxSearchHistory" v-if="hisKeys">
        <div class="wxSearchHistoryItem">
          <p class="wxSearchHistoryItemTitle">搜索记录</p>
          <icon type="clear" size="18" @click="wxSearchDeleteAll"/>
        </div>
        <div class="wxSearchKeyList">
          <div class="wxSearchKeyItem" v-for="item in hisKeys" :key="item"  @click="wxSearchKeyTap" :data-key="item">
            <div>{{ item }}</div>
          </div>
        </div>
      </div>
      <div class="wxSearchKey" v-if="hotKeys.length > 0">
        <p class="wxSearchTitle">搜索热点</p>
        <div class="wxSearchKeyList">
          <div class="wxSearchKeyItem" v-for="item in hotKeys" :key="item" @click="wxSearchKeyTap" :data-key="item">{{ item }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    hotKeys: {
      type: Array,
      default: []
    },
    tipsKeys: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      inputShowed: false,
      wxSearchData: {},
      hisKeys: []
    };
  },
  created() {
    let temData = {};
    temData.hotKeys = this.hotKeys;
    temData.value = '';
    this.wxSearchData = temData;
    this.getHisKeys();
  },
  methods: {
    showInput() {
      this.inputShowed = true;
    },
    hideInput() {
      this.inputShowed = false;
    },
    // 监听搜索框的输入事件
    wxSearchInput(e) {
      let inputValue = e.mp.detail.value;
      let temData = this.wxSearchData;
      let tipKeys = [];
      if (inputValue && inputValue.length > 0) {
        for (let i = 0; i < this.tipsKeys.length; i++) {
          let mindKey = this.tipsKeys[i];
          if (mindKey.indexOf(inputValue) !== -1) {
            tipKeys.push(mindKey);
          }
        }
      }

      temData.value = inputValue;
      temData.tipsKeys = tipKeys;
      this.wxSearchData = temData;
    },
    // 确认或回车
    wxSearchConfirm(e) {
      this.hideInput();
      let key = e.target.dataset.key;
      if (key === 'back') {
        this.$emit('go-back');
      } else {
        this.search(this.wxSearchData.value);
      }
    },
    // 清空输入
    wxSearchClear() {
      let temData = this.wxSearchData;
      temData.value = '';
      temData.tipKeys = [];
      this.wxSearchData = temData;
    },
    // 清除所有历史记录
    wxSearchDeleteAll(e) {
      const self = this;
      wx.removeStorage({
        key: 'wxSearchHisKeys',
        success: (res) => {
          self.hisKeys = [];
        }
      });
    },
    // 点击历史记录或热点的点击事件
    wxSearchKeyTap(e) {
      this.search(e.mp.currentTarget.dataset.key);
    },
    // 发起搜索事件
    search(inputValue) {
      if (inputValue && inputValue.length > 0) {
        this.wxSearchAddHisKey(inputValue);
        let temData = this.wxSearchData;
        temData.value = '';
        this.wxSearchData = temData;
        this.$emit('search', inputValue);
      }
    },
    // 获取历史记录数据
    getHisKeys() {
      let self = this;
      let value = [];
      try {
        value = wx.getStorageSync('wxSearchHisKeys');
        if (value) {
          self.hisKeys = value;
        }
      } catch (e) {
      }
    },
    // 保存添加历史记录
    wxSearchAddHisKey(inputValue) {
      const self = this;
      if (!inputValue || inputValue.length === 0) {
        return;
      }

      let value = wx.getStorageSync('wxSearchHisKeys');
      if (value) {
        let idx = value.indexOf(inputValue);
        if (idx < 0) {
          value.unshift(inputValue);
        } else {
          value.splice(idx, 1);
          value.unshift(inputValue);
        }
        wx.setStorage({
          key: 'wxSearchHisKeys',
          data: value,
          success: function() {
            self.getHisKeys();
          }
        });
      } else {
        value = [];
        value.push(inputValue);
        wx.setStorage({
          key: 'wxSearchHisKeys',
          data: value,
          success: function() {
            self.getHisKeys();
          }
        });
      }
    }
  }
};
</script>

<style>
.searchbar-result {
  margin-top: 0;
  font-size: 14px;
}
.searchbar-result:before {
  display: none;
}
.weui-cell {
  padding: 12px 15px 12px 35px;
}
/** 整个区域 */
.wxSearch{
  position: absolute;
  top: 43px;
  left: 0;
  width: 100%;
  height: 100%;
  border-top: 1px #eee solid;
  background-color: rgba(200, 200, 200, 0.1);
  z-index: 9999;
}

/** 搜索框下面的提示区域 */
.wxSearchInner{
  background-color: #fff;
}

/** 搜索热点标题 */
.wxSearchTitle{
  display: block;
  padding: 10px 5px 5px 10px;
  font-size: 13px;
  text-align: left;
}

/** 提示样式 */
.wxSearchMindKeyItem{
  padding: 10px 5px 10px 15px;
  margin-left: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  font-size: 13px;
}

/** 标签样式 */
.wxSearchKeyList{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid #eee;
}

/** 标签样式 */
.wxSearchKeyItem{
  flex: 0 0 18%;
  font-size: 13px;
  text-align: center;
  border: 1px solid #eee;
  margin: 5px;
  padding: 4px 5px 4px 5px;
  border-radius: 0px;
  background-color: rgba(200, 200, 200, 0.1);
}

/** 搜索记录标题栏 */
.wxSearchHistoryItem{
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 5px;
  padding-bottom: 5px;
  display: flex;
}

/** 搜索记录标题 */
.wxSearchHistoryItemTitle{
  flex: 8;
  font-size: 13px;
}

/** 搜索记录删除按钮 */
.wxSearchHistoryItemDel{
  flex: 1;
  font-size: 13px;
  text-align: center;
  padding-top:2px;
  padding-bottom: 2px;
  border: 1px solid #eee;
  border-radius: 2px;
}

.search-text {
  font-size: 15px;
}
</style>
